<template>
    <div>
        <el-menu router unique-opened :default-active="$route.path" background-color="#304156" text-color="#fff" active-text-color="#ffd04b">

            <template v-for="(v, i) in routers">
                 <!-- 一级路由 -->
                <el-menu-item v-if="v.children.length===1" :index="v.path" :key="i">
                    <span slot="title">
                        <i :class="v.icon"></i>
                        {{v.meta.title}}
                    </span>
                </el-menu-item>

                <!-- 二级路由 -->
                <el-submenu v-else :index="v.path" :key="i">
                    <template slot="title">
                        <i :class="v.icon"></i>
                        <span>{{v.meta.title}}</span>
                    </template>
                    <el-menu-item v-for="(v2, i2) in v.children.filter(v3=>v3.isMenu)" :index="v2.path" :key="i2">{{v2.meta.title}}</el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
import {showRouter} from "@/router/index.js";  //引入路由

export default {
    data(){
        return {
            routers: showRouter().filter(v => {
                return v.isMenu
            })
        }
    },
}
</script>

<style lang="less" scoped>
.el-col-12{
    width: 100%;
}
.el-menu{
    border: 0;
}
</style>